<template>
	<view class="page">
		<live-pusher
		id='livePusher'
		ref="livePusher" 
		class="livePusher" 
		:url="url"
		:mode="mode" 
		:enable-camera="enableCamera" 
		:auto-focus="true" 
		:device-position="position"
		:beauty="beauty" 
		:whiteness="whiteness"
		aspect="9:16" 
		@statechange="statechange" 
		@netstatus="netstatus" 
		@error = "error"
		:style="'height: '+windowHeight+'px;'"
		style="width: 750rpx;"></live-pusher>
		
		<!-- 头部 -->
			<view style="position:fixed; left: 0; bottom: 0; right: 0; top:15rpx;">
				<!-- :style="'top:'+statusBarHeight/2+'px'" -->
				<!-- 个人信息｜观看详细信息 -->
				<view style="height: 80rpx;" class="px-2 flex justify-between">
					<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex rounded-circle">
						<view class="p">
							<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="width:70rpx;height:70rpx;" class="rounded-circle"></image>
						</view>
						<view class="flex-1 flex flex-column justify-center">
							<text class="text-white font">昵称</text>
							<text class="text-white font-sm">100</text>
						</view>
						<view class="p">
							<view class="rounded-circle bg-danger" style="width:70rpx; height:70rpx;">
								<text class="text-white" style="text-align: center; display: block;">+</text>
							</view>
						</view>
					</view>
				
				
				
					<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex rounded-circle">
						<scroll-view scroll-x="true" class="flex-1 flex" style="width:100%" enable-flex="true">
							<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="width:70rpx;height:70rpx;" class="rounded-circle"></image>
						</scroll-view>

						<view class="p">
							<view class="rounded-circle bg-danger flex flex-column justify-center" style="width:70rpx; height:70rpx;">
								<text class="text-white font-sm"></text>
								<text class="text-white font-sm" style="text-align: center; display: block;">1000</text>
								<text class="text-white font-sm"></text>
							</view>
						</view>
						
					</view>
				
				</view>
				
				
				
				<!-- 金币 -->
				<view style="height: 80rpx;" class="px-2 my-2">
					<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex rounded-circle align-center justify-between">
						<view class="p">
							<text class="text-warning">金币</text>
						</view>
						<view class="flex-1 flex flex-column justify-center">
							<text class="text-white font-sm">100</text>
						</view>
					</view>
				</view>
				
				
				<!-- 收到礼物 -->
				<f-gift ref="gift"></f-gift>
				
			</view>
			
		<!-- 弹幕 -->
		<f-danmu ref="danmu"></f-danmu>
		
		<!-- 底部 -->
		<view style="position:fixed; left: 0; bottom: 0; right: 0;height: 120rpx;" class="flex align-center justify-between">
			
			<view class="flex-1 flex flex-column align-center justify-center" v-for="(item, index) in btns" :key="index" @click="handleBottomEvent(item)">
				<image :src="item.iconpath" style="width:45rpx; height: 45rpx; background-color: rgba(0,0,0,0);" class="rounded-circle"></image>
				<text class="text-white font">{{item.name}}</text>
			</view>
		</view>
		
		
		
		<uni-popup type="bottom" ref="popup">
			<view class="bg-white">
				<view class="flex align-center justify-center border-bottom" style="height: 90rpx;">
					<text class="font-md">{{popupTitle}}</text>
				</view>
				<!-- 画质选择 -->
				<view v-if="popupType == 'mode'">
					<view class="flex align-center justify-center py-2" v-for="(item, index) in modeList" :key="index" :class="mode === item.type ? 'bg-main' : ''" @click="chooseMode(item)">
						<text class="font-md" :class="mode === item.type ? 'bg-main' : ''">{{item.desc}}</text>
					</view>
				</view>
				 <!-- 美颜 -->
				 <view v-else-if="popupType === 'beauty'">
					 <slider :min="0" :max="9" :step="1" :value="beauty" :block-size="18" show-value @change="handleSliderChange"/>
				 </view>
				 
				 <!-- 美白 -->
				 <view v-else-if="popupType === 'whiteness'">
					 <slider :min="0" :max="9" :step="1" :value="whiteness" :block-size="18" show-value @change="handleSliderChange"/>
				 </view>
				
				<!-- 更多 -->
				<view v-else class="flex flex-wrap">
					<view class="flex flex-column align-center justify-center" style="width: 150rpx; height: 150rpx">
						<text class="iconfont font-sm mb-1" style="text-align:center; display: block;">&#xe611;</text>
						<text class="font">暂停</text>
					</view>
					<view class="flex flex-column align-center justify-center" style="width: 150rpx; height: 150rpx" @click="back">
						<text class="iconfont font-sm mb-1" style="text-align:center; display: block;">&#xe64d;</text>
						<text class="font">退出</text>
					</view>
				</view>
				
				<view class="f-divider"></view>
				<view class="flex align-center justify-center" style="height: 90rpx;" hover-class="bg-light" @click="closePopup">
					<text class="font-md">取消</text>
				</view>
			</view>
		</uni-popup>
		
		
		
	</view>
</template>

<script>
	import fGift from '@/components/live/f-gift.vue';
	import uniPopup from "@/components/uni-ui/uni-popup/uni-popup.vue";
	import fDanmu from "@/components/live/f-danmu.vue";
	import demoGifts from "@/demo/gifts.js";
	
	export default {
		components:{
			fGift,
			uniPopup,
			fDanmu
		},
		data() {
			return {
				statusBarHeight:0,
				screenHeight:0,
				content:"",
				gifts:[],
				giftActiveId:0,
				
				mode: "SD",
				position:"back",
				beauty:0,
				whiteness:0,
				
				url: "",
				enableCamera:true,
				windowHeight: 0,
				context:null,
				
				
				modeList:[{
						type: "SD",
						desc: "标清"
				},
				{
						type: "HD",
						desc: "高清"
				},
				{
						type: "FHD",
						desc: "超清"
				}],
				
				popupType: "mode",
				
				btns:[{
					name:"翻转",
					icon:"\ue605",
					event: "switchCamera",
					iconpath: "https://www.dogeman.studio/public/uploads/static/functions/live/turn_camera.png",
					size: 40
				},{
					name:"画质",
					icon:"\ue60c",
					event: "openPopup",
					params:"mode",
					iconpath: "https://www.dogeman.studio/public/uploads/static/functions/live/HD.png",
					size: 50
				},{
					name:"美颜",
					icon:"\ue632",
					event: "openPopup",
					params:"beauty",
					iconpath: "https://www.dogeman.studio/public/uploads/static/functions/live/beauty.png",
					size: 40
				},{
					name:"美白",
					icon:"\ue631",
					event: "openPopup",
					params:"whiteness",
					iconpath: "https://www.dogeman.studio/public/uploads/static/functions/live/whiteness.png",
					size: 50
				},{
					name:"更多",
					icon:"\ue84b",
					event: "openPopup",
					params:"more",
					iconpath: "https://www.dogeman.studio/public/uploads/static/functions/live/more.png"
				}]
				
			}
		},
		onLoad(e) {
			let res = uni.getSystemInfoSync()
			this.statusBarHeight = res.statusBarHeight
			this.screenHeight = res.windowHeight
			this.windowHeight = res.windowHeight
			
			let options = JSON.parse(e.options)
			
			this.mode = options.mode
			this.position = options.position
			this.beauty = options.beauty
			this.whiteness = options.whiteness
			
			//演示
			this.gifts = demoGifts
			console.log(this.gifts)
			
		},
		onReady() {
			this.context = uni.createLivePusherContext('livePusherId', this)
			this.startPreview()
		},
		mounted(){
			// 送礼物演示
			// setInterval(()=>{
			// 	this.$refs.gift.send({
			// 		username:"发送人",
			// 		avatar:"",
			// 		gift_name:"蛋糕",
			// 		gift_image:"/static/gift/3.png",
			// 		num:1
			// 	})
			// }, 3000)	
			
			// 发送弹幕演示
			// let id=1
			// setInterval(()=>{
			// 	this.$refs.danmu.send({
			// 		id:id,
			// 		name:"昵称"+id,
			// 		content:"DogeLive is Great!"+id
			// 	})
			// 	id++
			// },3000)
		},
		computed: {
			popupTitle(){
				let o = {
					mode: "画质",
					beauty: "美颜",
					whiteness: "美白",
					more: "更多"
				}
				return o[this.popupType]
			}
		},
		methods: {
			handleBottomEvent(item){
				this[item.event](item.params)
			},
			back(){
				uni.showModal({
					content: '是否要结束当前直播',
					success: (res)=>{
						if (res.confirm){
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
			},
			closeGift(){
				this.$refs.giftPopup.close()
			},		
			openInput(){
				this.$refs.input.open()
			},
			// 画质选择
			chooseMode(item){
				this.mode = item.type
				uni.showToast({
					title: "画质切换为"+ item.desc,
					icon: 'none'
				})
				this.$refs.popup.close()
			},
			openPopup(type){
				this.popupType = type
				this.$refs.popup.open()
			},
			closePopup(){
				this.$refs.popup.close()
			},
			// 切换摄像头
			switchCamera(){
				this.context.switchCamera({
					success:(e)=>{
						this.position = this.position === 'back' ? 'front' : 'back'
					}
				})
			},
			
			// 开启预览
			startPreview(){ 
				this.context.startPreview({
					success:(e)=>{
						console.log(e)
					}
				})
			},
			// 直播状态变化
			statechange(e){
				console.log(e)
			},
			// 直播网络变化
			netstatus(e){
				console.log(e)
			},
			error(e){
				console.log(e)
			},
			handleSliderChange(e){
				this[this.popupType] = console.log(e.detail.value)
			}
		}
	}
</script>

<style>
.page{
    width: 750rpx;
	height: 100%;
}

::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
.btn{
	height: 80rpx; 
	border-radius: 100rpx; 
	background-color: rgba(255,255,255,0.12);
	align-items: center;
	justify-content: center;
}

</style>
